<template>
  <el-container class="goods-edit">
    <el-header>
      <el-tabs class="sa-m-t-10" v-model="stepActive" @tab-click="isValidate">
        <el-tab-pane :name="0">
            <template #label>
              <div class="sa-flex" :class="validateData['0'] ? 'is-error' : ''">
                基本信息
                <el-icon v-if="validateData['0']" class="sa-m-l-5">
                  <warning-filled />
                </el-icon>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane :name="1">
            <template #label>
              <div class="sa-flex" :class="validateData['1'] ? 'is-error' : ''">
                价格/库存
                <el-icon v-if="validateData['1']" class="sa-m-l-5">
                  <warning-filled />
                </el-icon>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane :name="2">
            <template #label>
              <div class="sa-flex" :class="validateData['2'] ? 'is-error' : ''">
                发货设置
                <el-icon v-if="validateData['2']" class="sa-m-l-5">
                  <warning-filled />
                </el-icon>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane :name="3">
            <template #label>
              <div class="sa-flex" :class="validateData['3'] ? 'is-error' : ''">
                商品参数
                <el-icon v-if="validateData['3']" class="sa-m-l-5">
                  <warning-filled />
                </el-icon>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane :name="4">
            <template #label>
              <div class="sa-flex" :class="validateData['4'] ? 'is-error' : ''">
                商品详情
                <el-icon v-if="validateData['4']" class="sa-m-l-5">
                  <warning-filled />
                </el-icon>
              </div>
            </template>
          </el-tab-pane>
          <!-- <el-tab-pane :name="5">
            <template #label>
              <div class="sa-flex" :class="validateData['5'] ? 'is-error' : ''">
                带货配置
                <el-icon v-if="validateData['5']" class="sa-m-l-5">
                  <warning-filled />
                </el-icon>
              </div>
            </template>
          </el-tab-pane> -->
          <el-tab-pane :name="6" v-if="form.model.store_id ===null && isSelect==false ||props.modal.params.type=='add'  || props.modal.params.values=='supply'">
            <template #label>
              <div class="sa-flex" :class="validateData['6'] ? 'is-error' : ''">
                供应链设置
                <el-icon v-if="validateData['6']" class="sa-m-l-5">
                  <warning-filled />
                </el-icon>
              </div>
            </template>
          </el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main class="sa-p-t-10">
      <!-- 基本信息 -->
      <el-form :model="form.model" :rules="form.rules" ref="formRef0" label-width="100px">
        <div v-show="stepActive == 0">
          <div class="goodstype sa-flex sa-m-b-20" @click="goodsModality">
            <img v-if="!(modal.params.type == 'edit' && form.model.type == 'virtual')" class="goods-type"
              :class="form.model.type == 'normal' ? 'is-active' : ''" src="/static/images/shop/goods/entity.png"
              @click="onChangeGoodsType('normal')" />
            <img v-if="!(modal.params.type == 'edit' && form.model.type == 'normal')" class="goods-type"
              :class="form.model.type == 'virtual' ? 'is-active' : ''" src="/static/images/shop/goods/virtual.png"
              @click="onChangeGoodsType('virtual')" />
          </div>
          <el-form-item label="商品标题" prop="title">
            <el-input v-model="form.model.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="form.model.subtitle" placeholder="请输入副标题"></el-input>
          </el-form-item>
          <el-form-item label="商品主图" prop="image">
            <sa-uploader v-model="form.model.image" fileType="image" @success="onSuccess"></sa-uploader>
            <div class="warning-title"> 作用于商城列表、分享图片；建议尺寸：750*750 px </div>
          </el-form-item>
          <el-form-item label="轮播图" prop="images">
            <sa-uploader v-model="form.model.images" :multiple="true" :fileType="['image','video']"></sa-uploader>
            <div class="warning-title sa-m-l-8">
              作用于商品详情顶部轮播显示，<br />轮播图可以拖拽调整顺序
            </div>
          </el-form-item>
          <el-form-item label="商品分类">
            <div class="sa-w-360">
              <el-popover popper-class="category-tooltip sa-popper" effect="light" placement="top-start" trigger="click">
                <el-tabs v-model="tempCategory.tabActive">
                  <el-tab-pane v-for="tab in category.select" :key="tab" :label="tab.name" :name="tab.id + ''">
                    <el-cascader-panel v-model="tempCategory.idsArr[tab.id]" :ref="(el) => setCategoryRef(el, tab)"
                      :options="tab.children" :props="{
                        multiple: true,
                        checkStrictly: true,
                        value: 'id',
                        label: 'name',
                        children: 'children',
                        emitPath: false,
                      }" @change="onChangeCategoryIds"></el-cascader-panel>
                  </el-tab-pane>
                </el-tabs>
                <template #reference>
                  <div class="category-tag-wrap">
                    <el-tag v-for="(value, key) in tempCategory.label" :key="key" type="info" closable
                      @close.stop="onDeleteCategoryIds(key)">{{ value }}</el-tag>
                    <div class="category-tag-wrap-suffix"
                      :class="JSON.stringify(tempCategory.label) == '{}' ? '' : 'is-active'">
                      <el-icon class="arrow-down">
                        <arrow-down />
                      </el-icon>
                      <el-icon class="circle-close" @click.stop="onClearCategoryIds">
                        <circle-close />
                      </el-icon>
                    </div>
                  </div>
                </template>
              </el-popover>
            </div>
            <!-- <el-button v-auth="'shop.admin.category.add'" class="sa-m-l-12" type="primary" link @click="onAddCategory">添加商品分类</el-button> -->
          </el-form-item>
          <el-form-item label="商品排序">
            <el-input v-model="form.model.weigh" placeholder="请输入商品排序" class="sa-w-160" type="number" :min="0"
              step-strictly></el-input>
          </el-form-item>
          <el-form-item label="限购类型">
            <el-radio-group v-model="form.model.limit_type">
              <el-radio label="none">不限购</el-radio>
              <el-radio label="daily">每日</el-radio>
              <el-radio label="all">累计</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="限购数量" v-if="form.model.limit_type != 'none'">
            <el-input v-model="form.model.limit_num" placeholder="请输入限购数量" class="sa-w-160" :min="0"
              type="number"></el-input>
          </el-form-item>
          <el-form-item label="商品状态">
            <el-radio-group v-model="form.model.status">
              <el-radio label="up">上架</el-radio>
              <el-radio label="hidden">隐藏</el-radio>
              <el-radio label="down">下架</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上架商品到店铺">
            <el-select v-model="form.model.store_id" placeholder="选择店铺" class="sa-w-160">
              <el-option v-for="item in shopLists" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          </el-form-item>
          
        </div>
      </el-form>
      <!-- 商品信息 -->
      <el-form :model="form.model" :rules="form.rules" ref="formRef1" label-width="100px">
        <div v-show="stepActive == 1">
          <el-form-item label="商品规格">
            <el-radio-group v-model="form.model.is_sku" @change="changeradio" disabled>
            <!-- <el-radio-group v-model="form.model.is_sku" @change="changeradio" :disabled="props.modal.params.type == 'edit'"> -->
              <el-radio :label="0">单规格</el-radio>
              <el-radio :label="1">多规格</el-radio>
            </el-radio-group>
            <div class="warning-title">
              如商品参与了拼团、秒杀、积分等活动，切换规格，可能导致活动规格不可用
            </div>
          </el-form-item>
          <el-form-item label="价格模板">
            <el-select class="sa-w-360" v-model="form.model.price_temp_id" placeholder="请选择价格模板（当前为自定义）" @change="tempchange" clearable>
                <el-option v-for="item in pricetemp.select" :key="item.id" :label="item.title"
                  :value="item.id"></el-option>
                </el-select>
          </el-form-item>
          <template v-if="form.model.is_sku === 1">
            <!-- 操作 -->
            <div class="sku-wrap">
              <div class="sku" v-for="(s, k) in form.model.skus" :key="k">
                <div class="sku-key sa-flex sa-row-between">
                  <div class="sa-flex">
                    <div class="sa-m-r-16">规格名称</div>
                    <el-input v-model="s.name" placeholder="请输入规格名称" class="sku-key-input"></el-input>
                  </div>
                  <el-icon @click="deleteMainSku(k)" class="sku-key-icon">
                    <CircleCloseFilled />
                  </el-icon>
                </div>
                <div class="sku-value sa-flex sa-flex-wrap">
                  <div class="sku-value-title sa-m-r-16 sa-m-b-16 sa-flex"> 规格值 </div>
                  <div v-for="(sc, c) in s.children" :key="c" class="sku-value-box sa-m-b-16">
                    <el-input v-model="sc.name" placeholder="请输入规格值" class="sku-value-input"></el-input>
                    <el-icon @click="deleteChildrenSku(k, c)" class="sku-value-icon">
                      <CircleCloseFilled />
                    </el-icon>
                  </div>
                  <div @click="addChildrenSku(k)" class="sku-value-add sa-m-r-24 sa-m-b-16 sa-flex cursor-pointer">
                    添加规格值
                  </div>
                </div>
              </div>
              <div class="sku-tools sa-flex">
                <el-button type="primary" class="add" @click="addMainSku">+ 添加规格</el-button>
              </div>
            </div>
            <!-- 表格 -->
            <div class="sku-table-wrap sa-m-b-20">
              <table class="sku-table" rules="all">
                <thead>
                  <tr>
                    <template v-for="(item, i) in form.model.skus" :key="i">
                      <th v-if="item.children.length">{{ item.name }}</th>
                    </template>
                    <th>图片</th>
                    <th>
                      <div class="sa-flex">
                        <div class="th-title">价格(元)</div>
                        <el-popover placement="top" width="160" v-model:visible="allEditPopover.price" trigger="click">
                          <template #reference>
                            <el-icon class="batch-icon">
                              <Edit />
                            </el-icon>
                          </template>
                          <el-input v-model="allEditDatas" placeholder="请输入价格" size="small" class="alledit-input"
                            type="number" :step="0.01" :min="0" :precision="2"></el-input>
                          <div class="sa-flex sa-row-right">
                            <el-button class="is-link" size="small" type="primary"
                              @click="allEditData('price', 'cancel')">取消</el-button>
                            <el-button type="primary" size="small" @click="allEditData('price', 'define')">确定</el-button>
                          </div>
                        </el-popover>
                      </div>
                    </th>
                    <th>
                      <div class="sa-flex">
                        <div class="th-title">划线价格</div>
                        <el-popover placement="top" width="160" v-model:visible="allEditPopover.original_price"
                          trigger="click">
                          <template #reference>
                            <el-icon class="batch-icon">
                              <Edit />
                            </el-icon>
                          </template>
                          <el-input v-model="allEditDatas" placeholder="请输入划线价格" size="small" class="alledit-input"
                            type="number" :step="0.01" :min="0" :precision="2"></el-input>
                          <div class="sa-flex sa-row-right">
                            <el-button size="small" type="primary" class="is-link"
                              @click="allEditData('original_price', 'cancel')">取消</el-button>
                            <el-button type="primary" size="small"
                              @click="allEditData('original_price', 'define')">确定</el-button>
                          </div>
                        </el-popover>
                      </div>
                    </th>
                    <th>
                      <div class="sa-flex">
                        <div class="th-title">成本价</div>
                        <el-popover placement="top" width="160" v-model:visible="allEditPopover.cost_price"
                          trigger="click">
                          <template #reference>
                            <el-icon class="batch-icon">
                              <Edit />
                            </el-icon>
                          </template>
                          <el-input v-model="allEditDatas" placeholder="请输入成本价" size="small" class="alledit-input"
                            type="number" :step="0.01" :min="0" :precision="2"></el-input>
                          <div class="sa-flex sa-row-right">
                            <el-button class="is-link" size="small" type="primary"
                              @click="allEditData('cost_price', 'cancel')">取消</el-button>
                            <el-button type="primary" size="small"
                              @click="allEditData('cost_price', 'define')">确定</el-button>
                          </div>
                        </el-popover>
                      </div>
                    </th>
                    <th>库存(件)</th>
                    <th>库存预警(件)</th>
                    <th>
                      <div class="sa-flex">
                        <div class="th-title">重量(kg)</div>
                        <el-popover placement="top" width="160" v-model:visible="allEditPopover.weight" trigger="click">
                          <template #reference>
                            <el-icon class="batch-icon">
                              <Edit />
                            </el-icon>
                          </template>
                          <el-input v-model="allEditDatas" placeholder="请输入重量" size="small" class="alledit-input"
                            type="number" :step="0.01" :min="0" :precision="2"></el-input>
                          <div class="sa-flex sa-row-right">
                            <el-button class="is-link" size="small" type="primary"
                              @click="allEditData('weight', 'cancel')">取消</el-button>
                            <el-button type="primary" size="small" @click="allEditData('weight', 'define')">确定</el-button>
                          </div>
                        </el-popover>
                      </div>
                    </th>
                    <th>
                      <div class="sa-flex">
                        <div class="th-title">规格编码</div>
                        <el-popover placement="top" width="160" v-model:visible="allEditPopover.sn" trigger="click">
                          <template #reference>
                            <el-icon class="batch-icon">
                              <Edit />
                            </el-icon>
                          </template>
                          <el-input v-model="allEditDatas" placeholder="请输入规格编码" size="small" class="alledit-input"
                            type="number"></el-input>
                          <div class="sa-flex sa-row-right">
                            <el-button class="is-link" size="small" type="primary"
                              @click="allEditData('sn', 'cancel')">取消</el-button>
                            <el-button type="primary" size="small" @click="allEditData('sn', 'define')">确定</el-button>
                          </div>
                        </el-popover>
                      </div>
                    </th>
                    <th>商品状态</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, i) in form.model.sku_prices" :key="i">
                    <template v-for="(v, j) in item.goods_sku_text" :key="j">
                      <td>
                        <span class="th-center">{{ v }}</span>
                      </td>
                    </template>
                    <td class="image">
                      <sa-uploader v-model="item.image" fileType="image" size="28"></sa-uploader>
                    </td>
                    <td>
                      <el-input v-model="item.price" placeholder="请输入价格" size="small" type="number" :step="0.01" :min="0"
                        :precision="2"></el-input>
                    </td>
                    <td>
                      <el-input v-model="item.original_price" placeholder="请输入划线价格" size="small" type="number"
                        :step="0.01" :min="0" :precision="2"></el-input>
                    </td>
                    <td>
                      <el-input v-model="item.cost_price" placeholder="请输入成本价" size="small" type="number" :step="0.01"
                        :min="0" :precision="2"></el-input>
                    </td>
                    <td class="stock">
                      <el-input v-model="item.stock" placeholder="请输入库存" size="small"
                        v-if="props.modal.params.type == 'add'" type="number" :step="1" :min="0"></el-input>
                      <span v-if="props.modal.params.type == 'edit'">
                        {{ item.stock }}
                      </span>
                    </td>
                    <td class="stock_warning">
                      <div class="sa-flex">
                        <el-switch v-model="item.stock_warning_switch" @change="changeStockWarningSwitch(i)"
                          class="sku-stock-switch" />
                        <span v-if="!item.stock_warning_switch">使用默认库存预警</span>
                        <el-input v-model="item.stock_warning" placeholder="请输入" size="small"
                          v-if="item.stock_warning_switch" type="number" :step="1" :min="0"></el-input>
                      </div>
                    </td>
                    <td>
                      <el-input v-model="item.weight" placeholder="请输入" size="small" type="number" :step="0.01" :min="0"
                        :precision="2"></el-input>
                    </td>
                    <td class="sn">
                      <el-input v-model="item.sn" placeholder="请输入" size="small"></el-input>
                    </td>
                    <td>
                      <el-select v-model="item.status" placeholder="请选择" size="small">
                        <el-option label="上架" value="up"></el-option>
                        <el-option label="下架" value="down"></el-option>
                      </el-select>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
          <div v-if="form.model.is_sku == 0">
            <el-form-item label="售卖价格" prop="price">
              <el-input v-model="form.model.price" placeholder="请输入售卖价格" class="sa-w-160" type="number"
                :min="0" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="划线价格">
              <el-input v-model="form.model.original_price" placeholder="请输入划线价格" class="sa-w-160" type="number"
                :step="0.01" :min="0" :precision="2" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="商家采购价格">
              <el-input v-model="form.model.buy_price" placeholder="请输入商家采购价格" class="sa-w-160" type="number"
                :step="0.01" :min="0" :precision="2" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="成本价格">
              <el-input v-model="form.model.cost_price" placeholder="请输入成本价格" class="sa-w-160" type="number" :step="0.01"
                :min="0" :precision="2" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="库存类型">
              <el-radio-group v-model="form.model.stock_show_type">
                <el-radio label="exact">
                  <div class="sa-flex">
                    <div>精确显示</div>
                    <el-popover placement="right" title :width="244" trigger="hover">
                      <template #reference>
                        <div class="icon-warning">
                          <img src="/static/images/shop/category/warning.png" />
                        </div>
                      </template>
                      <div class="sale-hover-img">
                        <img src="/static/images/shop/goods/stock2.png" />
                      </div>
                    </el-popover>
                  </div>
                </el-radio>
                <el-radio label="sketchy">
                  <div class="sa-flex">
                    <div>粗略显示</div>
                    <el-popover placement="right" title :width="244" trigger="hover">
                      <template #reference>
                        <div class="icon-warning">
                          <img src="/static/images/shop/category/warning.png" />
                        </div>
                      </template>
                      <div class="sale-hover-img">
                        <img src="/static/images/shop/goods/stock1.png" />
                      </div>
                    </el-popover>
                  </div>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品库存">
              <el-input v-model="form.model.stock" placeholder="请输入商品库存" class="sa-w-160" type="number" :step="1" :min="0"
                :disabled="props.modal.params.type == 'edit'">
                <template #append>件</template>
              </el-input>
            </el-form-item>
            <el-form-item label="库存预警">
              <el-switch v-model="stockWarning" />
              <div class="warning-title"> 库存预警在未开启的状态下，使用默认库存预警 </div>
            </el-form-item>
            <el-form-item v-if="stockWarning" label="预警数量">
              <el-input v-model="form.model.stock_warning" placeholder="请输入库存预警数量" class="sa-w-160">
                <template #append>件</template>
              </el-input>
            </el-form-item>
          </div>
          <el-form-item label="销量类型">
            <el-radio-group v-model="form.model.sales_show_type">
              <el-radio label="exact">
                <div class="sa-flex">
                  <div>精确显示</div>
                  <el-popover placement="right" :width="244" trigger="hover">
                    <img class="exact" src="/static/images/shop/goods/sales2.png" />
                    <template #reference>
                      <div class="icon-warning">
                        <img src="/static/images/shop/category/warning.png" />
                      </div>
                    </template>
                  </el-popover>
                </div>
              </el-radio>
              <el-radio label="sketchy">
                <div class="sa-flex">
                  <div>粗略显示</div>
                  <el-popover placement="right" :width="244" trigger="hover">
                    <img class="sketchy" src="/static/images/shop/goods/sales1.png" />
                    <template #reference>
                      <div class="icon-warning">
                        <img src="/static/images/shop/category/warning.png" />
                      </div>
                    </template>
                  </el-popover>
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="虚拟销量">
            <div class="sa-form-wrap">
              <el-input class="sa-w-360" v-model="form.model.show_sales" placeholder="请输入虚拟销量" type="number" :min="0">
              </el-input>
              <div class="warning"> 可以提高商品的销量排行榜，鼓励用户下单 </div>
            </div>
          </el-form-item>
          <div v-if="form.model.is_sku == 0">
            <el-form-item label="商品重量">
              <el-input v-model="form.model.weight" placeholder="请输入商品重量" class="sa-w-160" type="number" :step="0.01"
                :min="0" :precision="2">
                <template #append>kg</template>
              </el-input>
            </el-form-item>
            <el-form-item label="商品编号">
              <el-input v-model="form.model.sn" placeholder="请输入商品编号" class="sa-w-160"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <!-- 商品规格 -->
      <el-form :model="form.model" :rules="form.rules" ref="formRef2" label-width="100px">
        <div v-show="stepActive == 2">
          <!-- <template v-if="form.model.type == 'normal'"> -->
            <el-form-item label="配送方式">
              <el-radio-group v-model="form.model.dispatch_type">
                <el-radio label="express">物流快递</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.model.dispatch_type" label="物流快递" prop="dispatch_id">
                <el-select class="sa-w-360" v-model="form.model.dispatch_id" placeholder="请选择物流快递">
                  <el-option v-for="item in dispatch.select" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
                <!-- <el-button v-auth="'shop.admin.dispatch.dispatch.add'" class="sa-m-l-12" type="primary" link @click="onAddDispatch('express')">
                  添加物流快递
                </el-button> -->
            </el-form-item>
            <el-form-item label="货到付款">
              <el-switch v-model="form.model.is_offline" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
          <!-- </template> -->
          <template v-if="form.model.type == 'virtual'">
            <el-form-item label="配送方式">
              <el-radio-group v-model="form.model.dispatch_type" @change="onChangeDispatchType">
                <el-radio label="autosend">自动发货</el-radio>
                <el-radio label="custom">手动发货
                  <el-popover popper-class="sa-popper" trigger="hover">
                    在订单管理，手动对订单进行发货，发货时填写自定义发货内容
                    <template #reference>
                      <el-icon class="warning">
                        <warning />
                      </el-icon>
                    </template>
                  </el-popover>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.model.dispatch_type == 'autosend'" label="自动发货" prop="dispatch_id">
                <el-select class="sa-w-360" v-model="form.model.dispatch_id" placeholder="请选择自动发货">
                  <el-option v-for="item in dispatch.select" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
                <el-button v-auth="'shop.admin.dispatch.dispatch.add'" class="sa-m-l-12" type="primary" link @click="onAddDispatch('autosend')">
                  添加自动发货
                </el-button>
            </el-form-item>
          </template>
        </div>
      </el-form>
      <el-form :model="form.model" :rules="form.rules" ref="formRef3" label-width="100px">
        <div v-show="stepActive == 3">
          <el-form-item label="服务保障" prop="service_ids" class="server">
            <el-select v-model="form.model.service_ids" placeholder="请选择服务保障" multiple>
              <el-option v-for="item in service.select" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-button v-auth="'shop.admin.goods.service.add'" class="sa-m-l-12" type="primary" link
              @click="createService">
              添加标签
            </el-button>
          </el-form-item>
          <el-form-item label="参数详情">
            <div class="sa-template-wrap">
              <div class="title sa-flex">
                <div class="key">参数名称</div>
                <div class="value">内容</div>
                <div class="oper">操作</div>
              </div>
              <sa-draggable v-model="form.model.params" :animation="300" handle=".sortable-drag" item-key="element">
                <template #item="{ element, index }">
                  <div class="item">
                    <el-form-item class="key" :prop="'params.' + index + '.title'" :rules="templateRules.title">
                      <el-input placeholder="请输入名称" v-model="element.title"></el-input>
                    </el-form-item>
                    <el-form-item class="value" :prop="'params.' + index + '.content'" :rules="templateRules.content">
                      <el-input placeholder="请输入标识" v-model="element.content"></el-input>
                    </el-form-item>
                    <el-form-item class="oper">
                      <el-button @click="deleteTemplate(index)" type="danger" class="is-link" plain>删除</el-button>
                      <sa-svg class="sa-m-l-8 sortable-drag" name="sa-round"></sa-svg>
                    </el-form-item>
                  </div>
                </template>
              </sa-draggable>
              <el-button @click="addTemplate()" class="sa-m-l-16" type="primary" plain icon="Plus">添加</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <el-form :model="form.model" :rules="form.rules" ref="formRef4" label-width="100px">
        <div v-show="stepActive == 4">
          <el-form-item label="图文详情">
            <div>
              <sa-editor v-model:content="form.model.descDetail"></sa-editor>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <el-form :model="form.model" :rules="form.rules" ref="formRef5" label-width="100px">
        <div v-show="stepActive == 5">
          <el-form-item label="社群带货">
            <el-switch v-model="form.model.sync_sns" :active-value="1" :inactive-value="0" />
            <div class="warning-title"> {{ form.model.sync_sns ? '是' : '否' }} </div>
          </el-form-item>
          <el-form-item label="社群分佣比例" v-if="form.model.sync_sns">
            <el-input v-model="form.model.commission_money_rate" placeholder="请输入社群分佣比例" class="sa-w-160" type="number"
              :step="0.01" :min="0" :precision="2">
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <el-form :model="form.model" :rules="form.rules" ref="formRef5" label-width="100px">
        <div v-show="stepActive == 6">
          <el-form-item label="是否加入供应链">
            <el-switch v-model="form.model.is_selected" :active-value="1" :inactive-value="0" />
            <div class="warning-title"> {{ form.model.is_selected ? '是' : '否' }} </div>
          </el-form-item>
          <el-form-item label="分佣比例" v-if="form.model.is_selected==1">
            <el-input v-model="form.model.commission_money_rate" placeholder="请输入分佣比例" class="sa-w-300" type="number"
              :step="0.01" :min="0" :precision="2">
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button v-if="props.modal.params.type == 'add' || props.modal.params.type == 'copy'"
        v-auth="'shop.admin.goods.goods.add'" v-throttle type="primary" @click="confirm">保存</el-button>
      <el-button v-if="props.modal.params.type == 'edit'" v-auth="'shop.admin.goods.goods.edit'" v-throttle
        type="primary" @click="confirm" v-loading="loadingbtn">更新并同步数据</el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
import { onMounted, reactive, ref, unref, watch, nextTick, getCurrentInstance } from 'vue';
import { api as dispatchApi } from '@/app/shop/admin/dispatch/dispatch.service';
import { api as categoryApi } from '@/app/shop/admin/category/category.service';
import { api } from '../goods.service';
import { isArray, isEmpty, cloneDeep, round } from 'lodash';
import SaEditor from '@/sheep/components/sa-editor/sa-editor.vue';
const multipleSelection = ref([])
const tableData = ref(
  [
    {
      id: 1,
      specification: 'XL',
      color: '红色',
      supplyPrice: 100,
      weight: '200g',
      startingQuantity: 10,
      activityPrice: 90, // 活动价
      salePrice: 120, // 售价
      marketPrice: 150, // 市场价
      settlementPrice: 95, // 结算价
      stock: 100, // 库存
      num: 10,
      disabled: true,
    },
    {
      id: 2,
      specification: 'L',
      color: '蓝色',
      supplyPrice: 90,
      weight: '180g',
      startingQuantity: 20,
      activityPrice: 80,
      salePrice: 110,
      marketPrice: 140,
      settlementPrice: 85,
      stock: 200, // 库存
      num: 10,
      disabled: true,
    },
    {
      id: 3,
      specification: 'M',
      color: '绿色',
      supplyPrice: 80,
      weight: '160g',
      startingQuantity: 30,
      activityPrice: 70,
      salePrice: 100,
      marketPrice: 130,
      settlementPrice: 75,
      stock: 300, // 库存
      num: 10,
      disabled: true,
    }
  ]
)
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const addRow = () => {
  tableData.value.push({
    id: tableData.value.length + 1,
    specification: '',
    color: '',
    supplyPrice: 0,
    weight: '',
    startingQuantity: 0,
    activityPrice: 0,
    salePrice: 0,
    marketPrice: 0,
    settlementPrice: 0,
    stock: 0, // 库存
    num: 10,
    disabled: false,
  })
}
const { proxy } = getCurrentInstance();

const emit = defineEmits(['modalCallBack']);
const props = defineProps({
  modal: {
    type: Object,
  },
});
const priceStatusOptions = ref([
  {
    label: "上浮",
    value: 'up'
  },
  {
    label: "下浮",
    value: 'down'
  },
  {
    label: "原价",
    value: 'normal'
  }
])
const tagWrapper = ref(null);
const tagInput = ref(null);
const updateStyle = () => {
  const inputInner = tagInput.value?.input;
  const tagWrapperEl = tagWrapper.value;
  if (tagWrapperEl) {
    const inputInitialHeight = 32;
    const { offsetHeight } = tagWrapperEl;
    const height = !isEmpty(tempCategory.label)
      ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`
      : `${inputInitialHeight}px`;
    inputInner.style.height = height;
    updatePopperPosition();
  }
};
const tooltipRef = ref();
const updatePopperPosition = () => {
  nextTick(() => {
    tooltipRef.value?.updatePopper();
  });
};
const changeradio = (value) => {
  console.log('change',value)
  console.log('form',form)
  form.model.is_sku = value
}
// 添加 编辑 form
let formRef = ref(null);
const stockWarning = ref(false);
const form = reactive({
  model: {
    checked: false,
    checked1: false,
    type: 'normal', // 商品类型
    title: '',
    subtitle: '',
    category_ids: '',
    category_ids_arr: [],
    salse_price_one: "",
    salse_price: "",
    image: '',
    images: [],
    params: [],
    content: '',
    original_price: 0,
    price: '',
    cost_price: '',
    is_sku: 0,
    limit_type: 'none',
    limit_num: 0,
    likes: '',
    views: 0,
    sales: '',
    stock: '',
    stock_warning: '',
    stock_warning_switch: false,
    sales_show_type: 'exact',
    stock_show_type: 'exact',
    show_sales: 0,
    service_ids: [],
    dispatch_type: 'express',
    dispatch_id: '',
    is_offline: 0,
    status: 'up',
    weigh: 0,
    weight: '',
    skus: [
      {
        id: 0,
        name: '',
        goods_id: 0,
        parent_id: 0,
        weigh: 0,
        children: [
          {
            id: 0,
            name: '',
            goods_id: 0,
            parent_id: 0,
            weigh: 0,
          },
        ],
      },
    ],
    sku_prices: [],
  },
  rules: {
    image: [{ required: true, message: '请选择商品主图', trigger: 'blur' }],
    images: [{ required: true, message: '请选择轮播图', trigger: 'blur' }],
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    category_ids: [{ required: true, message: '请输入商品分类', trigger: 'blur' }],
    price: [{ required: true, message: '请输入售卖价格', trigger: 'blur' }],
    dispatch_id: [{ required: true, message: '请选择发货模板', trigger: 'blur' }],
  },
});
const loading = ref(false);
const loadingbtn = ref(false);
//步骤条
const stepActive = ref(0);
const next = () => {
  unref(formRef).validate((valid) => {
    if (valid) {
      stepActive.value++;
    } else {
      return false;
    }
  });
};
const validateData = ref({
  0: 0,
  1: 0,
  2: 0,
  3: 0,
  4: 0,
})
function isValidate() {
  nextTick(async () => {
    for (var key in validateData.value) {
      await proxy.$refs[`formRef${key}`].validate((valid) => {
        if (valid) {
          validateData.value[key] = 0;
        } else {
          validateData.value[key] = 1;
        }
      });
    }
  })
}

// 获取详情
async function getDetail(id) {
  // console.log('propsprops',props)
  // if(props.modal.params.from === '1688'){
  //   loading.value = true;
  //   const { error, data } = await api.shopaddgoodsdetail({offerIds:'[' + props.modal.params.id + ']'});
  //   if (error === 0) {
  //     form.model = data;
  //     form.model.params = isArray(form.model.params) ? form.model.params : [];
  //     form.model.sku_prices = isArray(form.model.sku_prices) ? form.model.sku_prices : [];
  //     form.model.price = Number(data.price);
  //     form.model.status = 'up';
  //     if (form.model.dispatch_id) {
  //       dispatchCheck.value = true;
  //     }

  //     // 商品分类
  //     initCategoryIds()

  //     if (form.model.is_sku == 0) {
  //       if (form.model.stock_warning > 0) {
  //         stockWarning.value = true
  //       }
  //     }

  //     if (form.model.is_sku == 1) {
  //       getInit();
  //     }
  //   }
  // }else{
    loading.value = true;
    const { error, data } = await api.getGoodsDetail(id);
    if (error === 0) {
      form.model = data;
      form.model.params = isArray(form.model.params) ? form.model.params : [];
      form.model.sku_prices = isArray(form.model.sku_prices) ? form.model.sku_prices : [];
      // form.model.price = ''
      // form.model.sellPrice = props.modal.params.sellPrice
      // form.model.price = Number(data.price);
      form.model.is_sku = 0;
      if(Number(props.modal.params.goods_id) > 0){
        form.model.price = Number(data.price)
      }else{
        form.model.original_price = props.modal.params.marketPrice
        form.model.cost_price = props.modal.params.sellPrice
        form.model.price = ''
      }
      let desc = ''
      if(data.descDetail){
        desc = JSON.parse(data.descDetail).goodsDescribe
      }
      
      console.log('desc',desc)
      form.model.descDetail = JSON.stringify(desc)
      console.log('form.model.descDetail',form.model.descDetail)
      if (form.model.dispatch_id) {
        dispatchCheck.value = true;
      }
      if(form.model.category_ids_arr){
      form.model.category_ids_arr.forEach(item => {
        if (tempCategory.idsArr[item[0]]) {
          tempCategory.idsArr[item[0]].push(item.pop())
        } else {
          tempCategory.idsArr[item[0]] = []
          tempCategory.idsArr[item[0]].push(item.pop())
        }
      })
    }
        const newlist = form.model.category_ids.split(',');
        if(newlist.length){
          newlist.forEach(item=>{
            for (var key in categoryRef) {
              let keyArr = key.split('-');
              if(categoryRef[key].menus.length){
                categoryRef[key].menus[0].forEach((itm,idx)=>{
                  if(Number(itm.value) === Number(item)){
                    tempCategory.label[itm.value] = keyArr[1] + '/' + itm.pathLabels.join('/');
                    console.log('tempCategory.label',tempCategory.label)
                  }
                })
              }
            }
          })
        }
      // 商品分类
      // initCategoryIds()

      if (form.model.is_sku == 0) {
        if (form.model.stock_warning > 0) {
          stockWarning.value = true
        }
      }

      if (form.model.is_sku == 1) {
        getInit();
      }
    }
  // }
  
}
function onClearCategoryIds() {
  tempCategory.idsArr = {}
  tempCategory.label = {}
}
let categoryRef = {};
const tempCategory = reactive({
  tabActive: '',
  idsArr: {},
  label: {}
})
function initCategoryIds() {
  tempCategory.idsArr = {}
  if(form.model.category_ids_arr){
  form.model.category_ids_arr.forEach(item => {
    if (tempCategory.idsArr[item[0]]) {
      tempCategory.idsArr[item[0]].push(item.pop())
    } else {
      tempCategory.idsArr[item[0]] = []
      tempCategory.idsArr[item[0]].push(item.pop())
    }
  })
}
  onChangeCategoryIds()
}
function onDeleteCategoryIds(id) {
  delete tempCategory.label[id];
  let idx = -1
  for (var key in tempCategory.idsArr) {
    tempCategory.idsArr[key].forEach((item, index) => {
      if (item == id) {
        idx = index
      }
    })
    if (idx != -1) {
      tempCategory.idsArr[key].splice(idx, 1)
      idx = -1
    }
  }
}
const category = reactive({
  select: [],
});
async function getCategorySelect() {
  ({ data: category.select } = await categoryApi.select());
  tempCategory.tabActive = category.select.length ? category.select[0].id + '' : ''
}
function onChangeCategoryIds() {
  nextTick(() => {
    tempCategory.label = {}
    for (var key in categoryRef) {
      let keyArr = key.split('-');
      if (categoryRef[key].checkedNodes.length > 0) {
        categoryRef[key].checkedNodes.forEach((row) => {
          tempCategory.label[row.value] = keyArr[1] + '/' + row.pathLabels.join('/');
        });
      }
    }
  })
}
const countId = ref(1);
const isEditInit = ref(false);
function getInit() {
  let tempIdArr = {};
  for (let i in form.model.skus) {
    // 为每个 规格增加当前页面自增计数器，比较唯一用
    form.model.skus[i]['temp_id'] = countId.value++;
    for (let j in form.model.skus[i]['children']) {
      // 为每个 规格项增加当前页面自增计数器，比较唯一用
      form.model.skus[i]['children'][j]['temp_id'] = countId.value++;
      // 记录规格项真实 id 对应的 临时 id
      tempIdArr[form.model.skus[i]['children'][j]['id']] =
        form.model.skus[i]['children'][j]['temp_id'];
    }
  }
  for (var i = 0; i < form.model.sku_prices.length; i++) {
    let tempSkuPrice = form.model.sku_prices[i];
    tempSkuPrice['temp_id'] = i + 1;
    // 将真实 id 数组，循环，找到对应的临时 id 组合成数组
    tempSkuPrice['goods_sku_temp_ids'] = [];
    let goods_sku_id_arr = tempSkuPrice['goods_sku_ids'].split(',');
    for (let ids of goods_sku_id_arr) {
      tempSkuPrice['goods_sku_temp_ids'].push(tempIdArr[ids]);
    }
    form.model.sku_prices[i] = tempSkuPrice;
  }

  if (props.modal.params.type == 'copy') {
    for (let i in form.model.skus) {
      // 为每个 规格增加当前页面自增计数器，比较唯一用
      form.model.skus[i].id = 0;
      for (let j in form.model.skus[i]['children']) {
        form.model.skus[i]['children'][j].id = 0;
      }
    }
  }

  if (form.model.sku_prices.length > 0) {
    form.model.sku_prices.forEach((si) => {
      si.stock_warning_switch = false;
      if (si.stock_warning || si.stock_warning == 0) {
        si.stock_warning_switch = true;
      }
    });
  }
  loading.value = false;
  setTimeout(() => {
    isEditInit.value = true;
  }, 200);
}


//获取配送方式
const dispatchCheck = ref(true);
const dispatch = reactive({
  select: [],
});
// 获取店铺列表
const shopLists=ref([])
const getShop=async()=>{
 const {error,data} = await api.getShopList();
 if(error==0){
  shopLists.value=data
 }
}
const setCategoryRef = (el, tab) => {
  if (el) {
    categoryRef[tab.id + '-' + tab.name] = el;
  }
};

88
function onSuccess(data) {
  form.model.image_wh = {
    w: data.image_width,
    h: data.image_height,
  };
}
function onAddCategory() {
  useModal(
    CategoryEdit,
    { title: '新建', type: 'add' },
    {
      confirm: () => {
        getCategorySelect();
      },
    },
  );
}
function onAddDispatch(dispatch_type) {
  useModal(
    DispatchEdit,
    { title: '新建', type: 'add', dispatchType: dispatch_type },
    {
      confirm: () => {
        getDispatchSelect();
      },
    },
  );
}
function onChangeDispatchType(val) {
  form.model.dispatch_id = val == 'custom' ? 0 : ''
  getDispatchSelect()
}
function onChangeGoodsType(type) {
  form.model.type = type;
  form.model.dispatch_type = type == 'normal' ? 'express' : 'autosend';
  form.model.dispatch_id = ''
  getDispatchSelect()
}
async function getDispatchSelect() {
  console.log('6666')
  ({ data: dispatch.select } = await dispatchApi.select({
    type: form.model.dispatch_type
  }));
}
// // 表单关闭时提交
const confirm = async()=>{
  isValidate()
  // setTimeout(async () => {
     if (validateData.value[0] == 0 && validateData.value[1] == 0 && validateData.value[2] == 0)  {
      loadingbtn.value = true
      let submitForm = cloneDeep(form.model);

      // 处理category_ids
      let idsArr = [];
      for (var key in tempCategory.idsArr) {
        idsArr.push(...tempCategory.idsArr[key]);
      }
      submitForm.category_ids = idsArr.join(',');

      if (submitForm.is_sku == 1) {
        delete submitForm.stock;
        delete submitForm.cost_price;
        delete submitForm.original_price;
        delete submitForm.price;
        delete submitForm.stock_warning;
        delete submitForm.sn;
        delete submitForm.weight;
      }

      if (props.modal.params.type == 'copy') {
        delete submitForm.id;
      }

      // 虚拟商品is_offline=0
      if (submitForm.type == 'virtual') {
        submitForm.is_offline = 0
      }
      console.log('form.model',form.model)
      console.log('props.modal.params',props.modal.params)
      
      submitForm.id = props.modal.params.id
      console.log('submitForm',submitForm)
      const { error, msg } =
        props.modal.params.type == 'add' || props.modal.params.type == 'copy'
          ? await api.saveGoods(submitForm)
          : await api.saveGoods(submitForm);
          loadingbtn.value = false
      if (error === 0) {
        emit('modalCallBack', {
          event: 'confirm',
        });
      }
    }
  // }, 500)
}
// 获取服务保障
const service = reactive({
  select: [],
});
async function getServiceSelect() {
  ({ data: service.select } = await api.service.select());
}
function createService() {
  useModal(
    ServiceEdit,
    { title: '新建', type: 'add' },
    {
      confirm: () => {
        getServiceSelect();
      },
    },
  );
}
function tempchange(id){
  console.log(id)
  console.log(pricetemp.select)
  const arr = pricetemp.select.find(item => item.id === id)
  if(!arr){return}
  // form.model.price   售卖价格处理
  if(arr.sale_price_float === 1){
    if(arr.sale_price_type === 2){
      form.model.price = Number(form.model.cost_price) + (Number(form.model.cost_price) / 100 * Number(arr.sale_price_num))
    }else{
      form.model.price = Number(form.model.cost_price) + Number(arr.sale_price_num)
    }
  }else if(arr.sale_price_float === 3){
    if(arr.sale_price_type === 2){
      form.model.price = Number(form.model.cost_price) - (Number(form.model.cost_price) / 100 * Number(arr.sale_price_num))
    }else{
      form.model.price = Number(form.model.cost_price) - Number(arr.sale_price_num)
    }
  }else{
    form.model.price = form.model.cost_price
  }
  form.model.price = round(form.model.price,2)
  // form.model.original_price   划线价格处理
  if(arr.market_price_float === 1){
    if(arr.market_price_type === 2){
      form.model.original_price = Number(form.model.cost_price) + (Number(form.model.cost_price) / 100 * Number(arr.market_price_num))
    }else{
      form.model.original_price = Number(form.model.cost_price) + Number(arr.market_price_num)
    }
  }else if(arr.market_price_float === 3){
    if(arr.market_price_type === 2){
      form.model.original_price = Number(form.model.cost_price) - (Number(form.model.cost_price) / 100 * Number(arr.market_price_num))
    }else{
      form.model.original_price = Number(form.model.cost_price) - Number(arr.market_price_num)
    }
  }else{
    form.model.original_price = form.model.cost_price
  }
  form.model.original_price = round(form.model.original_price,2)
  // form.model.buy_price   商家采购价格处理
  if(arr.buy_price_float === 1){
    if(arr.buy_price_type === 2){
      form.model.buy_price = Number(form.model.cost_price) + (Number(form.model.cost_price) / 100 * Number(arr.buy_price_num))
    }else{
      form.model.buy_price = Number(form.model.cost_price) + Number(arr.buy_price_num)
    }
  }else if(arr.buy_price_float === 3){
    if(arr.buy_price_type === 2){
      form.model.buy_price = Number(form.model.cost_price) - (Number(form.model.cost_price) / 100 * Number(arr.buy_price_num))
      console.log('Number(form.model.cost_price) / 100 * Number(arr.buy_price_num)',Number(form.model.cost_price) / 100 * Number(arr.buy_price_num))
    }else{
      form.model.buy_price = Number(form.model.cost_price) - Number(arr.buy_price_num)
    }
  }else{
    form.model.buy_price = form.model.cost_price
  }
  form.model.buy_price = round(form.model.buy_price,2)
}
async function init() {
  await getServiceSelect();
  await getCategorySelect();
  if (props.modal.params.type == 'edit' || props.modal.params.type == 'copy') {
    await getDetail(props.modal.params.id);
  } else {
    getInit();
  }
  getDispatchSelect();
}
const pricetemp = reactive({
  select:[]
})
async function getPriceTemp(){
  const {data, error} = await api.getPriceTemp()
  pricetemp.select = data
}
onMounted(() => {
  init();
  getShop()
  updateStyle();
  getPriceTemp();
});
</script>
<style lang="scss" scoped>
.detail {
  color: #23a6fe;
}

.notion {
  font-size: 10px;
}

.goods-edit {
  .el-header {
    --el-header-height: fit-content;
  }

  .goods-type {
    width: 140px;
    height: 56px;
    border: 1px solid rgb(230, 230, 230);
    border-radius: 4px;
    margin-left: 16px;
    cursor: pointer;

    &.is-active {
      border: 1px solid var(--el-color-primary);
    }
  }

  .is-error {
    color: #FF4D4F;
  }
}

.goods-edit {
  .oper {
    :deep() {
      .el-form-item__content {
        height: 32px;
      }
    }
  }
}

.header {
  width: 100%;
  height: 40px;
  color: #434343;
  padding-left: 16px;
  background: var(--sa-table-striped);
  margin: 24px 0 16px 0;
  font-weight: 500;
  font-size: 14px;
}

//商品形式
.goodstype {
  width: 140px;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.badge {
  color: var(--el-color-primary);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  position: absolute;
  top: -8px;
  right: -8px;
}

//提示文本
.warning-title {
  color: #faad14;
  font-size: 12px;
  line-height: 16px;
  margin-left: 16px;
}

.add-category {
  color: var(--el-color-primary);
  font-size: 14px;
  line-height: 16px;
}

//警告图标
.icon-warning {
  width: 14px;
  height: 14px;
  display: flex;
  margin-left: 8px;
}

//精确图片
.sales-hover-img {
  width: 220px;
  height: 98px;
  display: flex;
}

.stock-hover-img {
  width: 220px;
  height: 74px;
  display: flex;
}

//批量操作
.batch {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--sa-border);
  border-top: none;
  font-size: 12px;
  color: var(--sa-subtitle);

  .batch-title {
    margin-left: 12px;
    color: var(--el-color-primary);
    cursor: pointer;
  }

  .batch-cancle {
    margin-left: 8px;
    color: var(--sa-subfont);
  }
}

:deep() {

  //步骤条
  .el-step__head {
    display: none;
  }

  .el-step.is-simple:not(:last-of-type) .el-step__title {
    max-width: 100%;
  }

  .el-step__title.is-process {
    font-weight: 500;
    color: var(--el-color-primary);
  }

  .el-step__title.is-wait {
    font-weight: 500;
    color: var(--sa-font);
  }

  .el-step.is-simple .el-step__arrow::before {
    transform: rotate(-45deg) translateY(-3px);
    height: 9px;
  }

  .el-step.is-simple .el-step__arrow::after {
    transform: rotate(45deg) translateY(3px);
    height: 9px;
  }

  .el-steps--simple {
    background: var(--sa-table-header-bg);
  }

  .server {
    .el-form-item__content {
      width: 100%;
    }

    .el-button {
      border-radius: 0 4px 4px 0;
      background: var(--sa-table-header-bg);
    }

    .el-select__tags {
      padding-left: 12px;

      .el-tag {
        background: var(--sa-table-header-bg);
      }
    }
  }
}

img {
  width: 100%;
  height: 100%;
}

.success {
  color: red;
}

.sku-wrap {
  width: 100%;
  border: 1px solid #d9d9d9;
  padding: 8px;
  box-sizing: border-box;

  .sku {
    width: 100%;
    min-height: 100px;

    .sku-key {
      width: 100%;
      height: 40px;
      color: var(--sa-subtitle);
      padding: 0 16px;
      background: var(--sa-table-header-bg);
      font-size: 14px;

      .sku-key-input {
        width: 120px;
      }

      .sku-key-icon {
        color: var(--el-color-primary);
      }
    }

    .sku-value {
      padding: 12px 0 0 30px;
      font-size: 14px;
      color: var(--sa-subtitle);

      .sku-value-title {
        height: 32px;
      }

      .sku-value-box {
        position: relative;
        margin-right: 24px;

        .sku-value-input {
          width: 104px;
        }

        .sku-value-icon {
          position: absolute;
          right: -8px;
          top: -8px;
          width: 16px;
          height: 16px;
          color: var(--el-color-primary);
        }
      }

      .sku-value-add {
        width: 104px;
        height: 32px;
        font-size: 14px;
        color: var(--el-color-primary);
      }
    }
  }

  .sku-tools {
    width: 100%;
    height: 40px;
    color: #434343;
    padding-left: 16px;
    background: var(--sa-table-header-bg);
    font-size: 12px;

    .add {}
  }
}

.alledit-input {
  margin-bottom: 10px;
}

.sku-table-wrap {
  width: 100%;
  overflow: auto;
  margin-top: 16px;

  .sku-table {
    width: 100%;
    border: 1px solid var(--sa-border);

    tbody {
      font-size: 12px;
    }

    th {
      font-size: 12px;
      color: var(--subtitle);
      height: 32px;
      line-height: 1;
      padding-left: 12px;
      box-sizing: border-box;
      text-align: left;

      .sku-table-header-title {
        margin-right: 10px;
      }

      .th-title {
        font-size: 12px;
        color: var(--subtitle);
        font-weight: bold;
      }
    }

    td {
      min-width: 88px;
      padding: 0 10px;
      height: 40px;
      box-sizing: border-box;

      &.image {
        min-width: 48px;
      }

      &.stock {
        min-width: 138px;
      }

      &.stock_warning {
        min-width: 168px;

        .sku-stock-switch {
          margin-right: 10px;
        }
      }

      &.sn {
        min-width: 116px;
      }
    }
  }
}

.batch-icon {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  color: var(--el-color-primary);
}
</style>
<style lang="scss">
.popper-category {
  // width: 350px;
  padding: 10px !important;

  .el-cascader-panel {
    overflow: auto;
  }

  .el-tooltip__trigger {
    position: relative;
    max-width: 360px;
    width: 100%;
  }
}

.category-content {
  position: relative;
  max-width: 360px;
  width: 100%;

  .category-tag {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 76px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;

    .el-tag {
      margin: 2px 0 2px 6px;
    }
  }
}

.category-tag-wrap {
  flex: 1;
  min-height: 32px;
  padding-right: 12px;
  border-radius: 4px;
  border: 1px solid var(--sa-border);
  cursor: pointer;
  position: relative;
}

.category-tag-wrap .el-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 2px 0 2px 6px;
  text-overflow: ellipsis;
}

.category-tag-wrap-suffix {
  width: 12px;
  height: 100%;
  position: absolute;
  right: 6px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-tag-wrap-suffix .circle-close {
  display: none;
}

.category-tag-wrap-suffix.is-active:hover .circle-close {
  display: block;
}

.category-tag-wrap-suffix.is-active:hover .arrow-down {
  display: none;
}
</style>
